<template>
  <div id="app">
    <v-todolist></v-todolist>
    <hr>
    <div class="testbtn">
      <v-mintui></v-mintui>
    </div>
    
    <hr>
    <!-- <v-elementui></v-elementui> -->
    <!-- <v-imgbtn class="btn"></v-imgbtn>
    <v-imgbtn class="btn"></v-imgbtn> -->
    <!-- 插槽传值 -->
    
    <v-cellbtn-link  :imgSrc="imgSrc" :title="title" class="btn">
    </v-cellbtn-link>
    <v-cellbtn-link  :imgSrc="imgSrc" :title="title" class="btn">
    </v-cellbtn-link>


  </div>
</template>

<script>
// 1-引入组件 创建组件
import todolist from './components/Todolist'
import mintui from './components/Mintui'
import elementui from './components/Element-UI'
import imgbtn from './components/ImgButton'
import cellbtn from './components/CellButton'
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      imgSrc:'/src/assets/invoice_4@3x.png',
      title:'统计分析',
      // btn:{imgSrc:'/src/assets/invoice_4@3x.png',title:'统计分析'}
    }
  },
  components:{
    // 2-挂载组件
    'v-todolist':todolist,
    'v-mintui':mintui,
    'v-elementui':elementui,
    'v-imgbtn':imgbtn,
    'v-cellbtn-link':cellbtn
  }
}
</script>

<style scoped>
#testbtn{
    display: -webkit-flex;
    display:flex;
    flex-direction: row;
    width: 90%;
    height: 250px;
}
.btn{
 width: 150px;
 height: 150px;
 margin: 2px;
 background-color: rgb(253, 222, 222)
}
</style>
